<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DavidXL ImageMenu</title>
<style>
body {
	margin 35px auto;
}

#container {
	width: 550px;
	margin 35px auto;
}

.imageMenu {
	position: relative;
	width: 500px;
	height: 200px;
	overflow: hidden;
	border: 2px solid #fff;
}

.imageMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 200px;
}

.imageMenu ul li {
	-moz-transition: width .5s ease-out;
	-webkit-transition: width .5s ease-out;
	-o-transition: width .5s ease-out;
	transition: width .5s ease-out;
	float: left;
	width:20%;
}

.imageMenu ul:hover li {
	width: 10% !important;
}

.imageMenu ul li:hover {
	width:60% !important;
}

#example2 ul li:target {
	width:60%;
}

#example2 ul li:not(:target) {
	width:10%;
}

#example3 ul li:target {
	width:60%  !important;
}

#example3 ul li:not(:target) {
	width:10%  !important;
}

.imageMenu ul li a {
	text-indent: -2500px;
	background:#FFF  repeat scroll 0%;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	height: 200px;
}

#landscapes1 a, #landscapes2 a, #landscapes3 a {background-image: url(images/landscapes.jpg);}
#people1 a, #people2 a, #people3 a {background-image: url(images/people.jpg);}
#nature1 a, #nature2 a, #nature3 a {background-image: url(images/nature.jpg);}
#urban1 a, #urban2 a, #urban3 a {background-image: url(images/urban.jpg);}
#abstract1 a, #abstract2 a, #abstract3 a {background-image: url(images/abstract.jpg);}

</style>

</head>
<body>

	<div id="container">
	
		<h1>ImageMenu</h1>
		<p>ImageMenu using only css3 and no javascript.</p>
		
		<h2>Style A</h2>
		<div id="example1">
			<div class="imageMenu">
				<ul>
					<li id="landscapes1"><a href="#landscapes1">Landscapes</a></li>
					<li id="people1"><a href="#people1">People</a></li>
					<li id="nature1"><a href="#nature1">Nature</a></li>
					<li id="urban1"><a href="#urban1">Urban</a></li>
					<li id="abstract1"><a href="#abstract1">Abstract</a></li>
				</ul>
			</div>
		</div>
		
		<h2>Style B</h2>
		<div id="example2">
			<div class="imageMenu">
				<ul>
					<li id="landscapes2"><a href="#landscapes2">Landscapes</a></li>
					<li id="people2"><a href="#people2">People</a></li>
					<li id="nature2"><a href="#nature2">Nature</a></li>
					<li id="urban2"><a href="#urban2">Urban</a></li>
					<li id="abstract2"><a href="#abstract2">Abstract</a></li>
				</ul>
			</div>
		</div>
	
		<h2>Style C</h2>
		<div id="example3">
			<div class="imageMenu">
				<ul>
					<li id="landscapes3"><a href="#landscapes3">Landscapes</a></li>
					<li id="people3"><a href="#people3">People</a></li>
					<li id="nature3"><a href="#nature3">Nature</a></li>
					<li id="urban3"><a href="#urban3">Urban</a></li>
					<li id="abstract3"><a href="#abstract3">Abstract</a></li>
				</ul>
			</div>
		</div>
		<p><a href="blog.davidxl.es">DavidXL</a></p>
</body>
</html>